<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <edit-container ref="containerRef" v-bind="containerConfig">
    <lg-form ref="formRef" v-loading="loading" :schema="schema" v-bind="formConfig">
      <template #component>
        <t-auto-complete
          v-model="data.component"
          style="width: 100%"
          :options="options"
          highlight-keyword
          placeholder="请输入页面组件"
          clearable
          @change="componentChange"
        />
      </template>
      <template #path>
        <t-auto-complete
          v-model="data.path"
          style="width: 100%"
          :options="pathOptions"
          highlight-keyword
          placeholder="请输入路径"
          clearable
        />
      </template>
    </lg-form>
  </edit-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { EditContainer, useEditContainer } from '@/components';
import { LgForm } from '@/soar';
import schema from './schema';
import api from './api';

const emits = defineEmits(['ok']);

const containerRef = ref();
const formRef = ref();

const { containerConfig, formConfig, loading, open, data } = useEditContainer<any>({
  header: '菜单',
  containerRef,
  formRef,
  getData: (params: any) =>
    api.detail(params.id).then((res: any) => {
      return res;
    }),
  onOk: async ({ values, data, params, isUpdate, changed }) => {
    values.id = data.id;
    await api.saveOrUpdate(values, isUpdate);
    emits('ok', values);
  },
  containerProps: {
    width: '1200px',
  },
  data: { type: 1, status: 0, parentId: '0' },
});

defineExpose({ open });
</script>
